import Vue from 'vue'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
import '@/styles/index.scss' // global css
import App from './App'
import store from './store'
import router from './router'
import BaiduMap from 'vue-baidu-map'
// vue-baidu-map文档地址：https://dafrok.github.io/vue-baidu-map/#/zh/
// 所有icons
import '@/icons' // icon
// 路由权限拦截方法
import '@/permission' // 路由的权限拦截
// 引入所有的指令进行注册
import * as directives from '@/directives/index'
// 引入注册组件的插件
import components from '@/components'

// 导入过滤器处理函数
import * as filters from '@/filters'
// 引入自己配置的多语言
import i18n from '@/lang/index'
import '@/utils/postMessage'

// 注册百度地图api理由，需要在百度地图开发者平台申请密钥
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'UNnu0yGtkhcA2utPAGG8EqpG18yr32fb'
})

// const filters = {
//   formatDate: function () {}
// }
// 循环遍历进行统一注册
for (const key in filters) {
  // 过滤器的名字就是对象的key，过滤器处理函数，对象的value
  Vue.filter(key, filters[key])
}

// Vue.use注册插件
// 是一个函数，调用的时候可以传入一个对象
// use方法或默认调用这个对象的install方法，同时把Vue传入
Vue.use(components)

// 全局注册一个过滤器
// Vue.filter('showPeople', function(arg) {
//   // return出去的内容就是使用过滤器地方具体展示的内容
//   return '测试内容'
// })
// Vue.component()
// nextTick的作用？
// 1、干啥的？当数据更新以后，想要获取最新的页面结构的时候，用到nextTick
// 2、当修改完数据以后，会触发当前数据的set方法，通知当前数据在get阶段收集到的所有依赖watcher进行更新？
// 3、更新不是同步更新的，而是通过nextTick注册的异步任务进行更新，所以修改完数据以后想要立即获取最新的页面结构是获取不到的
// 4、这时候我们自己可以使用NextTick继续注册一个异步任务
// 5、同步代码走完，开始清空异步任务。
// 6、nextTick的异步任务类型是根据宿主环境来进行判断的，promise/mutationsObserver/setimmediate/setTimetout
// 7、场景：行内编辑自动获取焦点

// 1、对象的key组成的数组
Object.keys(directives).forEach(item => {
  Vue.directive(item, directives[item])
})
// console.log(Object.keys(directives))

// Vue.directive('imgerror', {
//   inserted(dom) {}
// })

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
// set ElementUI lang to EN
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

// 定义一个异步组件
// const AsyncComponent = () => ({
//   // 需要加载的组件
//   component: import('./components/AsyncComponent.vue'),
//   // 加载中应该渲染的组件
//   loading: LoadingComponent,
//   // 加载失败时渲染的组件
//   error: ErrorComponent,
//   // 展示加载时组件的延时时间。默认值是 200 (毫秒)
//   delay: 200,
//   // 如果提供了超时时间且组件加载也超时了，
//   // 则使用加载失败时渲染的组件。默认值是：`Infinity`
//   timeout: 3000
// })

Vue.config.productionTip = false

new Vue({
  el: '#app',
  data: {},
  i18n,
  router,
  store,
  render: h => h(App)
}).$mount('#app')

// 路由导航守卫有哪些？
// 全局导航守卫
//      beforeEach  beforeResolve afterEach
// 组件独享导航守卫
//      beforeRouteEnter  beforeRouteUpdate beforeRouteLeave
// 路由对象的导航守卫
//      beforeEnter

// 首次进入某个页面
// beforeEach
// 路由对象的守卫 beforeEnter
// 组件的独享守卫 beforeRouteEnter
// 全局的beforeResolove
// 全局的afterEach

// user/1  user/2

// beforeEach
// 组件独享的beforeUpdate
// 全局的beforeResolve
// 全局的afterEach

// 生命周期钩子

// 作用区别特性
// 用法

// 1、面试官好，我叫黄宁，我毕业两年半了，毕业之后去了黑马公司，内部的oa项目
// 2、vue2的项目，vue3的项目和两个小程序
// 3、物流系统、家居管理、租房小程序
// 4、动态路由【自己琢磨出来如何实现】
// 5、

// 礼貌。卑微。
// 1、面试官您好【必须要有】
// 2、我叫xxx名字，我毕业于xx学校，工作几年时间了。
// 3、讲你这几家公司都是做什么的【业务】。
// 【自我介绍的讲项目，不需要讲特别细】【
//  公司：体现出核心业务是什么、细分的业务线是什么。
//       你是哪个业务线的，你主要负责哪些项目。【项目要和公司最好有关联】
//       根据项目说出你的技术栈【vue2全家桶，vue3，小程序，ui组件库 elementUI vant】,搭建后台管理用的是vue-element-admin
// 】
// 4、xxx公司、我们公司主要是做互联网金融的、主要的产品有股票牛、xxx
//    主要的用户是通过客服+直播形式进行维护和新用户的拉取，让他们在我们的平台进行交易
//    我在这家公司主要负责xxx业务线的前端开发、我主要做的项目有xxx
// 5、我的上上家公司主要是做医疗的，核心业务有政府业务板块、商家业务板块、我是商家业务线、主要做的项目有xx、xx、xx
//   主要的技术栈是XX，xx，xx

// 7、目前的学习计划：目前正在学习vue3【我们公司的新项目后期要用vue3进行搭建，所以我提前储备一下技术栈】。

// h5【移动端html页面】嵌套进原生APp里面的时候，叫做混合开发【如何通信】，获取用户信息【调用原生的方法，去进行获取】

// jsBridge

//
// promise async await
// async await的实现原理是什么？

// generator函数

function Parent(name, age) {
  this.name = name
  this.age = age
}

function Child(name, age) {
  Parent.call(this.name)
}

// 实现继承

// Promise.all([])
